<template>
  <div class="mi">
    <h1>{{message}}</h1>
     <button @click="add">点击数据++</button>
     <h1>{{num}}</h1>
     <h1>{{total}}</h1>
  </div>
</template>
<script>
import mixin from '@/mixin/index.js'
export default {
    // data里面的数据 是mixin的先执行，页面的后执行，mixin的被页面的数据给覆盖掉了

    // 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
    data(){
        return {
           message:'我是页面的数据',
           num:10
        }
    },
    // 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
    created() {
        console.log('我是页面的声明周期')
    },
    methods: {
        // 同名方法会合并成一个对象  混入的方法先执行 会覆盖混入的的方法 保留的是页面的方法
        add(){
            this.num++
            console.log('我是页面的方法');
        }
    },
    // 混入的先执行   后者覆盖前者   保留的页面的
    computed:{
        // total(){
        //     return '我是页面的计算属性'
        // }
    },
    mixins:[mixin],

}


var a = 1
console.log(a)
var a = 2
console.log(a)
</script>